<!--
 * @Author: kls
 * @Date: 2023-03-13 13:52:38
 * @LastEditTime: 2023-03-14 17:36:24
 * @LastEditors: kls
 * @Description: 
 * @FilePath: \jnks-shengpingtai\src\views\shengpingtai\home\index.vue
-->
<template>
  <div class="shengpingtai-box">
    <!-- 地图组件 -->
    <Map ref="Map"></Map>
    <!-- 左边 -->
    <div class="shengpingtai-box-left">
      <!-- 反制记录 -->
      <Card
        cardHeight="60%"
        :titleName="'反制记录'"
        :titleEName="'Reverse record'"
        :coverImgUrl="require('@/assets/imgs/reverse-record.png')"
      >
        <template v-slot:info-slot>
          <div class="box-info-solt reverse-record">
            <div class="reverse-record-search">
              <el-input
                class="search"
                v-model.lazy="search.devicedId"
                placeholder="请输入设备Id"
                size="mini"
                clearable
              ></el-input>
              <div class="select">
                <el-select
                  class="search"
                  v-model="search.city"
                  placeholder="所属城市"
                  :popper-append-to-body="false"
                  size="mini"
                  clearable
                >
                  <el-option
                    v-for="item in cityoptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </div>
              <el-button
                class="btn"
                type="primary"
                @click="checkSearch(1)"
                size="mini"
              >
                <template v-solt:icon>
                  <img
                    src="./assets/imgs/icon-search.png"
                    alt=""
                    width="12px"
                    height="12px"
                    class="icon"
                  />
                </template>
                查询</el-button
              >
            </div>
            <div class="reverse-record-table">
              <div class="table-title">
                <span>设备类型</span>
                <span>城市</span>
                <span>状态</span>
                <span>指令下发时间</span>
              </div>
              <div class="table-content">
                <div class="table-row">
                  <span>无线频谱探测定位设备</span>
                  <span>杭州</span>
                  <span>开启</span>
                  <span>2020.20.02 20:20:02</span>
                </div>
                <div class="table-row">
                  <span>无线频谱探测定位设备</span>
                  <span>杭州</span>
                  <span>开启</span>
                  <span>2020.20.02 20:20:02</span>
                </div>
                <div class="table-row">
                  <span>无线频谱探测定位设备</span>
                  <span>杭州</span>
                  <span>开启</span>
                  <span>2020.20.02 20:20:02</span>
                </div>
                <div class="table-row">
                  <span>无线频谱探测定位设备</span>
                  <span>杭州</span>
                  <span>开启</span>
                  <span>2020.20.02 20:20:02</span>
                </div>
                <div class="table-row">
                  <span>无线频谱探测定位设备</span>
                  <span>杭州</span>
                  <span>开启</span>
                  <span>2020.20.02 20:20:02</span>
                </div>
                <div class="table-row">
                  <span>无线频谱探测定位设备</span>
                  <span>杭州</span>
                  <span>开启</span>
                  <span>2020.20.02 20:20:02</span>
                </div>
                <div class="table-row">
                  <span>无线频谱探测定位设备</span>
                  <span>杭州</span>
                  <span>开启</span>
                  <span>2020.20.02 20:20:02</span>
                </div>
                <div class="table-row">
                  <span>无线频谱探测定位设备</span>
                  <span>杭州</span>
                  <span>开启</span>
                  <span>2020.20.02 20:20:02</span>
                </div>
                <div class="table-row">
                  <span>无线频谱探测定位设备</span>
                  <span>杭州</span>
                  <span>开启</span>
                  <span>2020.20.02 20:20:02</span>
                </div>
                <div class="table-row">
                  <span>无线频谱探测定位设备</span>
                  <span>杭州</span>
                  <span>开启</span>
                  <span>2020.20.02 20:20:02</span>
                </div>
                <div class="table-row">
                  <span>无线频谱探测定位设备</span>
                  <span>杭州</span>
                  <span>开启</span>
                  <span>2020.20.02 20:20:02</span>
                </div>
                <div class="table-row">
                  <span>无线频谱探测定位设备</span>
                  <span>杭州</span>
                  <span>开启</span>
                  <span>2020.20.02 20:20:02</span>
                </div>
              </div>
            </div>
          </div>
        </template>
      </Card>
      <!-- 反制及侦测架次统计 -->
      <Card
        cardHeight="38%"
        :titleName="'反制及侦测架次统计'"
        :titleEName="'Counter and detection'"
        :coverImgUrl="require('@/assets/imgs/ounter-and-detection.png')"
      >
        <template v-slot:info-slot>
          <div>反制记录</div>
        </template>
      </Card>
    </div>
    <!-- 右边 -->
    <div class="shengpingtai-box-right">
      <!-- 设备信息 -->
      <Card
        cardHeight="19%"
        :titleName="'设备信息'"
        :titleEName="'Device information'"
        :coverImgUrl="require('@/assets/imgs/device-information.png')"
      >
        <template v-slot:info-slot>
          <div class="box-info-solt device-information">
            <DeviceInformartion></DeviceInformartion>
          </div>
        </template>
      </Card>
      <!-- 反制次数 -->
      <Card
        cardHeight="26%"
        :titleName="'反制次数'"
        :titleEName="'Counter number'"
        :coverImgUrl="require('@/assets/imgs/equipment-statistics.png')"
      >
        <template v-slot:info-slot>
          <div>反制次数</div>
        </template>
      </Card>
      <!-- 本月及上月开启情况 -->
      <Card
        cardHeight="26%"
        :titleName="'本月及上月开启情况'"
        :titleEName="'Opening condition'"
        :coverImgUrl="require('@/assets/imgs/equipment-statistics.png')"
      >
        <template v-slot:info-slot>
          <div>名市设备统计</div>
        </template>
      </Card>
      <!-- 名市设备统计 -->
      <Card
        cardHeight="26%"
        :titleName="'名市设备统计'"
        :titleEName="'Equipment statistics'"
        :coverImgUrl="require('@/assets/imgs/equipment-statistics.png')"
      >
        <template v-slot:info-slot>
          <div>名市设备统计</div>
        </template>
      </Card>
    </div>
  </div>
</template>

<script>
import Map from "@/components/map.vue";
import Card from "@/components/card.vue";
import DeviceInformartion from "./components/deviceInformartion";
export default {
  components: { Map, Card, DeviceInformartion },
  data() {
    return {
      // 反制记录的搜索数据
      search: {
        devicedId: null,
        city: "",
      },
      cityoptions: [
        {
          value: "3",
          label: "杭州",
        },
        {
          value: "2",
          label: "上海",
        },
        {
          value: "1",
          label: "重庆",
        },
        {
          value: "4",
          label: "吉安",
        },
      ],
    };
  },
  methods: {},
  computed: {},
  watch: {},
  filters: {},
};
</script>

<style scoped lang="less">
.shengpingtai-box {
  position: relative;
  .shengpingtai-box-left {
    .box-info-solt {
      box-sizing: border-box;
      width: 100%;
    }
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    height: 90vh;
    width: 21vw;
    top: 7vh;
    left: 1vw;
    .reverse-record {
      padding: 0 1px;
      &-search {
        display: flex;
        justify-content: space-between;
        padding: 1% 5%;
        .select {
          ::v-deep .el-input {
            width: 100px;
            // margin-right: 10px;
            border: 1px solid #097991;
            border-radius: 2px;
            background-color: #0d161d;
          }
          ::v-deep .el-input__inner {
            background-color: transparent !important;
            border: unset !important;
            color: #ffffff;
          }
          //修改的是el-input上下的小图标的颜色
          ::v-deep .el-select .el-input .el-select__caret {
            color: #048cac;
          }
        }
        .icon {
          transform: translateY(2px);
        }
        ::v-deep .el-input {
          width: 154px;
          // margin-right: 10px;
          border: 1px solid #097991;
          border-radius: 2px;
          background-color: #0d161d;
        }
        ::v-deep .el-input__inner {
          background-color: transparent !important;
          border: unset !important;
          color: #ffffff;
        }
        ::v-deep .el-button--primary {
          background-color: #0d586a;
          border: 1px solid #04a5c5;
        }
      }
      &-table {
        .table-title {
          display: flex;
          padding: 0 5%;
          justify-content: flex-start;
          align-items: center;
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          span:nth-child(1) {
            margin-right: 72px;
          }
          span:nth-child(2) {
            margin-right: 12px;
          }
          span:nth-child(3) {
            margin-right: 15px;
          }
        }
        .table-content {
          height: 395px;
          overflow-y: scroll;
          .table-row {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 40px;
            padding: 0 5%;
            font-size: 12px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #ffffff;
            span:nth-child(1) {
              width: 136px;
            }
            span:nth-child(2) {
              width: 44px;
            }
            span:nth-child(3) {
              width: 46px;
            }
          }
          .table-row:nth-child(even) {
            background-color: rgba(39, 63, 73, 0.6);
          }
        }
        /* 滚动条样式 */
        .table-content::-webkit-scrollbar {
          display: none;
        }
      }
    }
  }
  .shengpingtai-box-right {
    .box-info-solt {
      box-sizing: border-box;
      width: 100%;
    }
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    height: 90vh;
    width: 21vw;
    top: 7vh;
    right: 1vw;
  }
}
</style>
